<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/c/font_3705412_f1kj8wofcor.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .iconfont {
            text-align: center;
            margin: 0 auto;
            font-size: 50px;
        }

        /* background-image:url() */


        /* .diva{
            width: 80pxpx;
            height: 80px;
            border-radius: 10px;
            border: 0px solid rgb(193, 79, 79);
        } */
        /* .aaa{
            width: 1500px;
            height: 600px;
            
            background-image:url(./杭州图片.png)
        } */
        .rap {
            width: 1500px;
            /* text-align: center; */
            /* background-color: blue; */
            margin: 0 auto;
        }

        .heat {
            width: 1500px;
            /* height: 76px; */
            display: flex;
            /* text-align: center; */
            background: linear-gradient(rgb(238, 234, 234), #fff, rgb(238, 234, 234));
            border-right: 1px solid rgb(146, 140, 140);
            justify-content: space-between
        }

        .heat li {
            border-right: 1px solid rgb(146, 140, 140);
            /* width: 150px; */
            height: 60px;
            line-height: 60px;
            padding: 10px;
        }


        .heat a:hover+.li1 {
            display: block;
        }

        .main {

            position: relative;

        }

        .bbb {
            margin-left: 50px;
            position: absolute;
            padding: 90px;
            top: 50px;
            left: 90px;
        }

        img {
            display: block;
        }

        p {
            font-size: 60px;
            font-weight: 800;
            color: #FFF;
        }

        p:nth-child(2) {
            /* margin-left: 10px; */
            font-size: 20px;
            color: #FFF;
        }

        p:nth-child(3) {
            font-size: 30px;
            color: #FFF;
            font-weight: 800;
        }

        button {
            background-color: #386ca7;
            color: #FFF;
            width: 100px;
            height: 40px;
            margin-top: 30px;
            border-radius: 10px;
        }

        .tupian img {
            margin-top: 25px;
        }

        .divone {
            /* color: #FFF; */
            position: relative;
            width: 1000px;
            height: 50px;
            margin: 0 auto;
            /* padding: 10px; */
            border: 30px solid transparent;
            border-top-color: #1c4371;
        }

        .divone_content {
            font-size: 14px;
            position: absolute;
            top: -24px;
            left: 30px;
            margin-left: 80px;
            /* text-align: center; */
            color: #FFF;
        }

        .divone_two {
            color: #FFF;
            text-align: center;
            position: absolute;
            top: -26px;
            left: 10px;
            width: 70px;
            height: 23px;
            border-radius: 2px 0px 0px 0px;
            background-color: #386190;

        }

        .divone_two01 {
            width: 0px;
            width: 0px;
            position: absolute;
            top: -3px;
            left: 68px;
            border: 15px solid transparent;
            border-left-color: #386190;
        }



        .bigbox {
            width: 1500px;
            /* justify-content: center; */
            /* text-align: center; */
            /* align-items:center */
            display: flex;

            justify-content: space-around;
        }

        .box {
            /* display: flex; */
            /* 虚阴影效果 */
            box-shadow: 2px 10px 10px rgb(153, 154, 155);
            margin-top: 40px;
            width: 300px;
            height: 260px;
            text-align: center;
        }

        .box p {
            padding: 10px;
            font-size: 20px;
            font-weight: 300;
            color: #000;
        }

        .box span {
            width: 200px;
            font-size: 14px;
            display: inline-block;
            font-weight: 300;
        }

        .legs {
            background-color: #fdfdfd;
            /* text-align: center; */
            width: 1500px;
            height: 500px;
            /* padding-left: 40px; */
            margin-top: 80px;
            box-shadow: 0px 5px 10px 0px rgba(153, 154, 155, 0.9);

        }

        h1 {
            /* background-color: antiquewhite; */
            padding: 30px;
            height: 80px;
            /* margin-top: 50px; */
            /* display: inline-block; */
            text-align: center;
        }

        .legs02 {
            height: 400px;
            width: 500px;
            padding: 100px;
            /* position: relative; */
            /* margin-bottom:50px ; */
            height: 200px;
        }

        .legs01 img {
            height: 300px;
            width: 600px;
            /* padding: 100px; */
        }

        .legs3 {
            width: 1500px;
            display: flex;
            justify-content: center;
        }

        .legs02 p {
            font-size: 20px;
            font-weight: 400;
            color: #000;
        }

        .legs p span {
            font-size: 16px;
            display: inline-block;
            font-weight: 300;
        }

        .footer {
            width: 1460px;
            margin-top: 8px;
            position: relative;
            padding: 20px;
            /* padding: 300px; */
            background-color: #e5e5e5;
            /* height: 500px; */
        }

        .footer .jiantou {
            /* background-color:transparent; */
            top: -28px;
            position: absolute;
            left: 722px

        }

        .big {
            width: 200px;
            height: 50px;
            display: flex;
        }

        .big_ringht {
            padding-left: 15px;

        }

        .big_ringht span {
            width: 200px;
            height: 50px;
            line-height: 10px;
            font-size: 12px;
            /* margin-bottom: 10px; */
        }

        .boxbox {
            padding: 30px;
            width: 1500px;
            height: 80px;
            /* line-height: 500px; */
            display: flex;
            justify-content: space-evenly;
            /* margin-top: 200px; */
            width: 1000px;
            margin: 0 auto;
        }

        .down {
            width: 1500px;
            height: 60px;
            /* margin-top: 20px; */
            display: flex;
            color: rgb(185, 194, 202);
            justify-content: space-around;
            background-color: #4b4848;
            align-items: center;
        }

        .down img {
            width: 30px;
            height: 20px;
            margin-left: 20px;
            display: inline-block;

            /* margin-top: 10px; */
        }

        .down span {
            text-align: center;
            margin: 0 top;
            padding: 15px;

        }

        .butt .bott01 {
            background-color: #000;
        }

        .bngbode {
            position: relative;
        }

        .bode {
            /* display: flex; */
            bottom: 20px;
            right: -375px;
            position: absolute;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background-color: #214977;
        }

        .bode01 {
            /* display: flex; */
            bottom: 20px;
            right: -400px;
            position: absolute;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background-color: #FFF;
        }

        .bode02 {
            /* display: flex; */
            bottom: 20px;
            right: -430px;
            position: absolute;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background-color: #FFF;
        }

        .bode03 {
            /* display: flex; */
            bottom: 20px;
            right: -460px;
            position: absolute;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background-color: #FFF;
        }

        .big_ringht .anniu {
            font-size: 12px;
            border-radius: 0%;
            /* padding-top:10px ; */
            border: 1px solid red;
            width: 40px;
            height: 20px;
            background-color: red;

        }
    </style>
</head>

<body>
    <div class="rap">
        <div class="heat">
            <ul>
                <li><img src="./杭州judan.jpg" alt=""></li>
            </ul>
            <li><a href="#">集团简介</a>
                <!-- <ul>
                <li>您的位置｜首页</li>
            </ul> -->
            </li>
            <li><a href="">项目间介</a></li>
            <li><a href="">户型介绍</a></li>
            <li><a href="">新闻更新</a></li>
            <li><a href="">招商信息</a></li>
            <li><a href="">留言联系</a></li>
            <li><a href="">友情链接</a></li>
            </ul>

        </div>
        <div class="main">
            <div class="aaa">
                <div class="diva"></div>
                <img src="./杭州图片.png" alt="">
                <div class="bigbode">

                </div>
                <div class="bbb">
                    <p>株洲小巨蛋</p>
                    <p>ZHU ZHOU FANHION CENTER</p>
                    <p>打造"中国(国际)名牌服饰展贸中心"</p>
                    <div class="tupian">
                        <img src="./05.png" alt="">
                    </div>
                    <button class="bdtwo">点击查看更多</button>
                    <button>分享一下</button>

                    <div class="bode"></div>
                    <div class="bode01"></div>
                    <div class="bode02"></div>
                    <div class="bode03"></div>
                </div>
            </div>
        </div>

        <div class="divone">
            <div class="divone_content"> 在1815线上，将有一座标志性建筑将拔地而起，
                这就是被誉为芦松服饰之窗的演艺发布中心，
                也就是株洲小巨蛋--2013.7.11至2012.7.20</div>

            <div class="divone_two">
                NEWS
                <div class="divone_two01"></div>
            </div>
        </div>

        <div class="bigbox">
            <div class="box">
                <img src="./03.png" alt="">
                <div class="box1">
                    <p>株洲小巨蛋官方微信</p>
                    <span> 赶紧打开微信扫一扫，添加株洲小巨蛋官方微信天天有好礼</span>
                </div>
            </div>

            <div class="box">
                <img src="./02.png" alt="">
                <div class="box1">
                    <p>株洲小巨蛋官方微信</p>
                    <span> 赶紧打开微信扫一扫，添加株洲小巨蛋官方微信天天有好礼</span>
                </div>
            </div>

            <div class="box">
                <img src="./07.png" alt="">
                <div class="box1">
                    <p>株洲小巨蛋官方微信</p>
                    <span> 赶紧打开微信扫一扫，添加株洲小巨蛋官方微信天天有好礼</span>
                </div>
            </div>

        </div>

        <div class="legs">
            <div>
                <h1>项目概况</h1>
            </div>
            <div class="legs3">

                <div class="legs01"><img src="./img3.png" alt=""></div>
                <div class="legs02">
                    <p>项目概况：湖南株洲芦淞区枫溪大道东侧</p>
                    <p><span>投资商：株洲汇美房地产开发有限公司</span></p>
                    <p><span>招商热线:0731-22509009或25882589</span></p>
                    <div class="butt">
                        <button>了解更多信息</button>
                        <button class="butt01">分享一下</button>
                    </div>

                </div>
                <!-- <i class="iconfont icon-xiajiantou_huaban"></i> -->
            </div>

        </div>
        <div class="footer">
            <div class="jiantou">
                <i class="iconfont icon-xiajiantou_huaban"></i>
            </div>
            <div>
                <h1>关注我们</h1>
            </div>

            <div class="boxbox">
                <!-- <div><h1>关注我们</h1></div>  -->
                <div class="big">
                    <div><img src="./杭州judan.jpg" alt=""></div>
                    <div class="big_ringht">
                        <span>株洲小巨蛋</span>
                        <button class="anniu">加关注</button>
                    </div>

                </div>

                <div class="big">
                    <div><img src="./汇美国际.png" alt=""></div>
                    <div class="big_ringht">
                        <span>株洲汇美国际服饰展贸中心</span>
                        <button class="anniu">加关注</button>
                    </div>

                </div>

                <div class="big">
                    <div><img src="./三角形.png" alt=""></div>
                    <div class="big_ringht">
                        <span>广州汇美国际服装城</span>
                        <button class="anniu">加关注</button>
                    </div>

                </div>

            </div>


            <div class="boxbox">
                <!-- <div><h1>关注我们</h1></div>  -->
                <div class="big">
                    <div><img src="./中心.png" alt=""></div>
                    <div class="big_ringht">
                        <span>新塘国际牛仔博览中心</span>
                        <button class="anniu">加关注</button>
                    </div>

                </div>

                <div class="big">
                    <div><img src="./汇美集团.png" alt=""></div>
                    <div class="big_ringht">
                        <span>汇美国际集团</span>
                        <button class="anniu">加关注</button>
                    </div>

                </div>


            </div>

        </div>

        <div class="down">
            <div> <span><img src="./中国.jpg" alt=""></span>
                <span>中国</span>
                <span>隐私政策</span>
                <span>使用条款</span>
            </div>
            <div>condafkndfldkfndlfndfdasaaa</div>
        </div>


    </div>
</body>

</html>